<!--
 * @Author: wuzhen
 * @Date: 2019-01-25 14:41:47
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-06 10:31:00
 * @Description: 个人信息
 -->
<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Badge>
        <Avatar :src="userAvator" />
      </Badge>
      <span style="margin: 0 5px">{{
        $store.state.user && $store.state.user.userInfo.membername
      }}</span>
      <Icon :size="18" type="md-arrow-dropdown" style="margin-left: 10px;"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="changePassword">修改密码</DropdownItem>
        <!-- <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem> -->
        <DropdownItem name="logout">退出系统</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <!-- 修改密码 -->
    <Modal v-model="showPassword" title="修改密码" width="350" @on-cancel="showPassword = false">
      <wz-form v-if="showPassword" ref="form" :label-width="80" :form-props="formProps">
      </wz-form>
      <div slot="footer">
        <Button type="text" @click="showPassword = false">取消</Button>
        <Button type="primary" @click="onSubmit">确定</Button>
      </div>
    </Modal>
    <!-- 提示是否退出系统 -->
    <Modal v-model="logoutModel" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>提示</span>
      </p>
      <div style="text-align:center">
        <p>点击确定后将退出系统，</p>
        <p>是否继续退出系统?</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="logout">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { changePwd } from "@/request/api";
export default {
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      logoutModel: false,
      showPassword: false,
      formProps: [
        {
          forms: [
            {
              label: "旧密码",
              type: "password",
              key: "oldpwd",
              span: 24,
              placeholder: "请输入旧密码",
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "旧密码不能为空！",
                  trigger: "blur"
                },
                {
                  min: 6,
                  max: 12,
                  message: "请输入6-12位密码！",
                  trigger: "blur"
                },
                {
                  validator: (rule, value, callback) => {
                    this.old_password = value;
                    callback();
                  }
                }
              ]
            },
            {
              label: "新密码",
              type: "password",
              key: "newpwd",
              span: 24,
              placeholder: "请输入新密码",
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "新密码不能为空！",
                  trigger: "blur"
                },
                {
                  min: 6,
                  max: 12,
                  trigger: "blur",
                  message: "请输入6-12位密码！"
                },
                {
                  validator: (rule, value, callback) => {
                    this.newpwd = value;
                    if (
                      !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,12}$/.test(
                        value
                      )
                    ) {
                      callback(new Error("密码必须以字母开头数字字母组合！"));
                    } else {
                      callback();
                    }
                  }
                },
                {
                  validator: (rule, value, callback) => {
                    this.newpwd = value;
                    if (value === this.old_password) {
                      callback(new Error("新密码与旧密码相同！"));
                    } else {
                      callback();
                    }
                  }
                }
              ]
            },
            {
              label: "确认密码",
              type: "password",
              key: "submitPassword",
              span: 24,
              placeholder: "请输入确认密码",
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "确认密码不能为空！",
                  trigger: "blur"
                },
                {
                  min: 6,
                  max: 12,
                  message: "请输入6-12位密码！",
                  trigger: "blur"
                },
                {
                  validator: (rule, value, callback) => {
                    if (value !== this.newpwd) {
                      callback(new Error("两次输入的密码不匹配！"));
                    } else {
                      callback();
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    ...mapActions(["LogOut"]),
    /**
     * @description: 退出登录
     */
    logout() {
      this.LogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    },
    /**
     * @description: 消息提醒
     */
    message() {
      let array = [1, 2, 3, 4, 5, 6];
      array.forEach((v, index) => {
        setTimeout(() => {
          this.$Notice.warning({
            title: "自定义位置" + v,
            desc: "右上角弹出的消息"
          });
        }, index * 100);
      });
    },
    /**
     * @description: 点击
     */
    handleClick(name) {
      switch (name) {
        case "changePassword": // 修改密码
          this.showPassword = true;
          break;
        case "logout": // 退出登录
          this.logoutModel = true;
          break;
        case "message": // 信息提醒
          this.message();
          break;
        default:
          break;
      }
    },
    // 确定修改密码
    async onSubmit() {
      try {
        const validate = await this.$refs.form.validate();
        if (validate.valid) {
          const res = await changePwd(validate.formData);
          if (res.code === 200) {
            this.$Message.success("密码修改成功，请重新登录！");
            this.logout();
          } else {
            this.$Message.error(res.retinfo);
          }
        }
      } catch (error) {
        throw error;
      }
    }
  }
};
</script>

<style lang="less">
.user {
  &-avator-dropdown {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    .ivu-badge-dot {
      top: 16px;
    }
  }
}
</style>
